<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="vuebox">
    <div class="container" align="center">
        <div class="row">
            <div class="col-lg-12">
                <span>编号:2</span>
                <span>桌号:<input type="text" v-model="num"/></span>
            </div>
        </div>
        <div class="row" v-for="(item,index) in meallist">
            <div class="col-lg-6">
                <span>{{item.name}}</span>
                <span>: {{item.price}}元</span>
            </div>
            <div class="col-lg-6">
                <button type="button" @click="minus(index)">-</button>
                &nbsp; {{item.number}} &nbsp;
                <button type="button" @click="plus(index)">+</button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                消费金额:{{countmoney}}元
            </div>
            <div class="col-lg-6">
                <button type="reset" @click="reset()">重置</button>
                <button type="button" @click="save()">下单</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var vm=new Vue({
        el: "#vuebox",
        data: {
            num:null,
            meallist:[{name:"米饭",price:1.0,number:0},{name:"米线",price:5.5,number:0},
                {name:"西蓝花",price:12.0,number:0},{name:"烧茄子",price:20.0,number:0}
            ],
            countmoney:0
        },
        watch:{
            meallist:{
                handler (val) {
                    this.countmoney=0;
                    for (var i=0;i<this.meallist.length;i++){
                        this.countmoney=this.countmoney+(this.meallist[i].number*this.meallist[i].price);
                    }
                },
                deep: true
            }
        },
        mounted() {

        },
        methods: {
            minus:function (index) {
                this.meallist[index].number--;
            },
            plus:function (index) {
                this.meallist[index].number++;
            },
            save:function () {
                if(this.num==null){
                    alert("请写入桌号!");
                    return false;
                }
                alert("下单成功!");
                window.location.reload();
            },
            reset:function () {
                for (var i=0;i<this.meallist.length;i++){
                    this.meallist[i].number=0;
                }
            }
        }
    })
</script>